<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <ul>
            <li>
                <span>站长之家</span> 
                <b>站长之家</b> 
            </li> 
            <li>
                <span>行业资讯</span>
                <b>行业资讯</b> 
            </li>
            <li>
                <span>站长在线</span>
                <b>站长在线</b>
            </li>
        </ul>
    </div>
</body>
<script>
   var spans=document.querySelectorAll("span")
   console.log(spans)
   var bs=document.querySelectorAll("b")
   console.log(bs) 
   var lis=document.querySelectorAll("li")
   for(var i=0;i<lis.length;i++){ 
       lis[i].index=i 
       console.log(i) 
        lis[i].onmouseover=function(){  
          spans[this.index].style.display="none"
          bs[this.index].style.display="block"
        }
        lis[i].onmouseout=function(){ 
          spans[this.index].style.display="block"
          bs[this.index].style.display="none"
        }
   }


</script>

</html>
<style>
    div {
        width: 800px;
        height: 40px;
        line-height: 40px;
        background-color: #ddd;
        margin: 0 auto;
    }
    ul {
        display: flex;
    }

    li {
        list-style: none;
        display: inline-block;
        position: relative;
        width: 150px;
        margin:  0 5px;
        text-align: center;
    }
    span {
        position: absolute;
        top: 1px;
        left: 5px;
        display:block;
        width: 150px;
        background-color: honeydew;
    }

    b {
        position: absolute;
        top: 1px;
        left: 5px;
        display: none;
        background-color: honeydew;
        width: 150px;
    }
</style>